<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 雷达图 - 自定义 Tooltip 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
</head>
<body>
<div id="radarChart" style="width: 600px; height: 600px;"></div>
<script>
var chart = echarts.init(document.getElementById('radarChart'));

// 数据
var radarIndicators = ['指标A', '指标B', '指标C', '指标D', '指标E'];
var radarData = [
    { name: '系列1', value: [60, 70, 80, 90, 75] },
    { name: '系列2', value: [40, 60, 70, 80, 65] }
];

// 配置项
var option = {
    tooltip: {
        trigger: 'item', // 触发类型为数据项触发
        backgroundColor: 'rgba(0, 0, 0, 0.7)', // 背景颜色
        borderColor: '#fff', // 边框颜色
        borderWidth: 1, // 边框宽度
        textStyle: {
            color: '#fff', // 文本颜色
            fontSize: 14 // 字体大小
        },
        formatter: function (params) {
            // 自定义提示框内容
            var seriesName = params.seriesName; // 系列名称
            var indicatorName = radarIndicators[params.dataIndex]; // 当前维度名称
            var value = params.value; // 当前维度的值

            // 拼接提示框内容
            var tooltipContent = `<strong>${seriesName}</strong><br/>`;
            tooltipContent += `${indicatorName}: ${value}`;
            return tooltipContent;
        }
    },
    radar: {
        indicator: radarIndicators.map(name => ({ name: name, max: 100 })), // 定义雷达图的维度和最大值
        center: ['50%', '50%'], // 雷达图中心位置
        radius: '80%' // 雷达图半径
    },
    series: [
        {
            type: 'radar',
            data: radarData.map(series => ({
                name: series.name,
                value: series.value
            }))
        }
    ]
};

// 初始化图表
chart.setOption(option);
</script>
</body>
</html>